<template>
    <div class="uploadContainer">
      <!-- <el-form ref="form" :model="form" label-width="80px"> -->
        <!-- <el-form-item label="礼品封面"> -->
          <div class="upInfo">
            <div class="showFile">
              <span v-if="spantxt.length != 0" class="file_txt" style="width:120px">{{spantxt}}</span>
              <el-input v-model="coverPath_d" placeholder="请输入内容" @blur="imgUrl" class="theInput"></el-input>
            </div>
          
            <el-upload
              ref="upload"
              class="avatar-uploader"
              :action="upPot"
              :show-file-list="false"
              :on-change="changeFile"
              :on-success="successFn"
              name="image">            
              <el-button slot="trigger" size="small" type="primary">选取&上传</el-button>
            </el-upload>  
          </div>
          <!-- :src="coverImg_d" -->
          <div :class="spantxt.length!=0?'showImg needMar':'showImg'">
            <img  style="width: 150px; height: 100px" :src="coverImg_d" :onerror="defunltImg">
            <!-- <div slot="error" class="image-slot">
              <i>{{coverImg_d}}</i>
              <i class="el-icon-picture-outline"></i>
            </div> -->
            
            <span @click="deleteImg" style="margin-left:15px;font-size:14px">删除</span>
          </div>
        <!-- </el-form-item> -->
      <!-- </el-form> -->
    </div>
</template>

<script>
import { abc } from "../../../js/abc.js";
import { potUrl } from "../../../js/config_url.js";
let upPot = abc.hostUrl + potUrl.upload + abc.getSession('params');
// console.log(upPot)
  export default {
    // name:'coverImg',
    props:['coverImg','coverPath','spantxt'],
    mounted(){
      console.log('span',this.spantxt)
    },
    data() {
      return {
        coverImg_d:this.coverImg,
        coverPath_d:this.coverPath,
        upPot:upPot,
        defunltImg:'this.src="'+require('../img/error.png')+'"',
      };
    },
    watch:{
      coverImg(newValue, oldValue){
        this.coverImg_d = this.coverImg
      },
      coverPath(newValue, oldValue){
        this.coverPath_d = this.coverPath
      }
    },
    methods: {
      changeFile(file, fileList) {
        var that = this;
        var reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = function(e){ 
             //this.result 这个就是base64编码了
            that.coverImg_d = this.result;
        }
      },
      successFn(response, file, fileLis){
        var that = this;
        that.coverPath_d = response.data.file_path;   
        that.$forceUpdate()
        that.$emit('throwFilePath',that.coverPath_d)     
      },
      deleteImg(){
          var that = this;
          that.coverImg_d = '';
          that.coverPath_d = ''
          that.$emit('throwFilePath',that.coverPath_d) 
      },
      imgUrl(){
        var that = this;
        that.$emit('throwFilePath',that.coverPath_d)
      }
    }
  }
</script>
<style>
.el-upload{text-align:left}
</style>
<style lang="scss" scoped>
.upInfo{
  display: flex;
  font-size:14px;
  margin-bottom: 15px;
  .file_txt{
    
    padding-right: 20px;
    display: inline-block;
    text-align: right;
    box-sizing: border-box;
  }
  .theInput{
    // flex-grow: 1;
    // padding:0 15px;
    height: 40px;
    line-height: 40px;
    margin-right: 15px;
    width:322px;
    // border:1px solid #DCDFE6;
    // border-radius: 4px;
    // color:#606266;
    font-size:14px;
  }
}
.needMar{
  margin-left: 122px;
}
.showImg{
  span{
    color:red;
    font-size:12px;
  }
  .el-image{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    text-align: center;
    line-height: 100px
  }
}
</style>